import { ref } from 'vue'
import { useDebounceHook } from './useDebounceHook'
export function useScrollHook(fn: Function) {
  //防抖
  const { debounce } = useDebounceHook()

  const scrollContainer = ref<HTMLElement | null>(null)

  // 滚动事件处理函数
  const handleScroll = debounce(() => {
    if (scrollContainer.value) {
      const { scrollTop, clientHeight, scrollHeight } = scrollContainer.value
      // 判断是否滚动到底部（允许一定误差）
      if (scrollTop + clientHeight >= scrollHeight - 5) {
        console.log('已滚动到底部')
        // 在这里可以触发加载更多数据等操作
        fn()
      }
    }
  }, 200)

  return {
    handleScroll,
    scrollContainer
  }
}
